<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr />
    <!-- 第一种获取全局数据的方式 {{$store.state.count}} -->
    <!-- 第二种方式使用辅助函数获取数据:mapState是一个函数参数是数组，返回值是一个对象,...是扩展运算符 -->
    <p>count 值：{{ count }}</p>
    <!-- 第一种修改state里面数据的方法 -->
    <!-- <button @click="$store.commit('sub', { num: -1 })" class="btn btn-warning"> -->

    <button @click="sub({ num: -1 })" class="btn btn-warning">-1</button>
    <!-- 第一种异步执行操作 -->
    <!-- <button @click="$store.dispatch('subAsync')" class="btn btn-danger">-1</button> -->
    <!-- 第二种异步操作 -->
    <button class="btn btn-danger" @click="subAsync">-1</button>
  </div>
</template>

<script>
// 按需导入mapState函数和mapMutations函数
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "Right",
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    ...mapMutations(["sub"]),
    ...mapActions(["subAsync"])
  },
};
</script>

<style>
</style>
